<%--
  Created by IntelliJ IDEA.
  User: 宇
  Date: 2023/8/3
  Time: 10:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath }"/>
<html>
<head>
<%--
        后端登录
--%>
    <title>登录</title>
    <link rel="stylesheet" href="${path}/css/back_Login.css">
    <script rel="script" src="${path}/js/jquery-3.6.4.js"></script>
</head>
<body>
<div id="box">
    <div id="box1">
        <h2>猫眼电影后台管理系统</h2>
        <form action="${path}/ManageuserServlet?prom=login" method="post" onsubmit="return checInfo()">
            <p><img src="${path}/images/back_Login/zanhao.png" alt="" class="img1"><input type="text" name="mana_name" class="bk" ></p>
            <p><img src="${path}/images/back_Login/mima.png" alt="" class="img1"><input type="password" name="mana_pwd" class="bk" ></p><br>
            <p class="yzm"><input type="text" placeholder="请输入验证码" id="yzm" name="mana_yzm"></p><div id="box2">123</div>
            <div id="box3"></div><br>
            <input type="submit" value="登录" class="butt">
        </form>
        <p class="wep">Copyright◎2020<a href="#">【猫眼】</a>AIl right reserved</p>
        <p class="wep"><a href="${path}/index.jsp">【进入前台】</a></p>
    </div>
</div>
<%-- 实现验证码--%>
<script type="text/javascript">
    var btn=document.querySelector('.butt')
    var ipt=document.querySelector('#yzm')
    var div=document.querySelector('#box2')
    var p=document.querySelector('#box3')

    div.innerHTML=Math.random().toString(36).substr(2).slice(0,4)

    div.onclick=function(){
        div.innerHTML=Math.random().toString(36).substr(2).slice(0,4)
    };

    btn.onclick=function(){
        if(ipt.value==div.innerHTML){
            p.innerHTML='验证成功';
            p.className='g'
        }else if (ipt.value!=div.inerHtml){
            p.innerHTML='验证失败';
            p.className='r'
            return false;
            location.reload();
        }
    }
</script>
</body>
</html>
